<template>
    <div style="background: rgba(69, 69, 146, 0.06);">
        <div v-if="loading" class="loadingClass">
            <Loading class="loadFont" vertical>数据整理中...</Loading>
        </div>
        <div class="dayClass" v-else>
            <div class="dayNextClass">
                <div class="CalendarShow">
                    <div class="dateTime">{{cal_label}}</div>
                </div>
                <div class="CombinedClass">
                    <img :src="Combined" class="CombinedImage"/>
                    Yanhua2.Wang@sanofi.com
                </div>
            </div>
            <!--Tab-->
            <van-tabs v-model="activeName" line-width="33.3%" color="#454592" title-active-color="#454592"
                      background="none"
                      title-inactive-color="#333333"
                      line-height="2px"
                      @change="tabChange">
                <van-tab title="10月" title-style="font-size: 16px;border-bottom: 1px solid #CCCCCC;"
                         name="2020/10"></van-tab>
                <van-tab title="11月" title-style="font-size: 16px;border-bottom: 1px solid #CCCCCC;"
                         name="2020/11"></van-tab>
                <van-tab title="12月" title-style="font-size: 16px;border-bottom: 1px solid #CCCCCC;"
                         name="2020/12"></van-tab>
                <!--搜索-->
                <div class="SeacherClass">
                    <div class="search">
                        <img :src="Seched" @click=""/>
                        <input class="input" @input="inputSearch($event)" :value="searchText"
                               placeholder="搜索医生/科室/医院/ETMS编码"/>
                    </div>
                    <img v-if="selectScreenNum === 0 && !showScreen" :src="update" @click="clickScreen"
                         style="margin-right: 8px;"/>
                    <img v-if="selectScreenNum > 0 || showScreen" :src="update2" @click="clickScreen"
                         style="margin-right: 8px;"/>
                    <div v-if="selectScreenNum > 0 && !showScreen" style="position: absolute;top: 9px;right: -7px;">
                        <div class="standardNum"
                             style="font-size: 8px;width: 12px;height: 12px;border: 1px solid #454592;border-radius: 10px;">
                            {{selectScreenNum}}
                        </div>
                    </div>
                </div>
                <!--勾选列表-->
                <div v-if="!showScreen" class="formClass">
                    <div class="columnClass">
                        <div class="formColumnDetail1">
                            <div class="itemsName" style="position: relative;left: 20px;">姓名</div>
                        </div>
                        <div class="formColumnDetail2">
                            <div class="items">SC</div>
                            <div class="items">EC</div>
                            <div class="items">CC</div>
                        </div>
                    </div>
                    <div class="parent-dom" style="height: 56vh;">
                        <vue-scroll :ops="ops">
                            <div class="child-dom">
                                <div class="list_item" v-for="(item, index) in infoList" v-bind:key="index">
                                    <div class="item_top" :style="item.select?'border-radius: 5px 5px 0 0;':''">
                                        <div style="display: flex;flex: 5;flex-direction: row;align-items: center;">
                                            <div class="formColumnDetail1">
                                                <div class="itemsName">
                                                    <span class="NameClass1">{{item.Name}}</span>
                                                    <span class="NameClass2">{{item.hospital}} / {{item.Department}} / <br> {{item.potential}} / {{item.faction}} / {{item.state}}</span>
                                                </div>
                                            </div>
                                            <div class="formColumnDetail2">
                                                <div class="items">
                                                    <div class="inputClass" @click="handleInputClick(index,'SC')">
                                                        <div class="itemInput">{{item.SC}}</div>
                                                    </div>
                                                </div>
                                                <div class="items">
                                                    <div class="inputClass" @click="handleInputClick(index,'EC')">
                                                        <div class="itemInput">{{item.EC}}</div>
                                                    </div>
                                                </div>
                                                <div class="items">
                                                    <div class="inputClass" @click="handleInputClick(index,'CC')">
                                                        <div class="itemInput">{{item.CC}}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </vue-scroll>
                    </div>

                </div>
                <!--Button按钮-->
                <div v-if="!showScreen" class="buttonClass">
                    <div class="buttonNext">
                        <div v-if="Submit">
                            <div class="button" @click="clearScreen"
                                 :style="'width:' + (clientWidth - 60) / 2 + 'px;background: #ACB318;'">
                                清除
                            </div>
                        </div>
                        <div v-if="Submit">
                            <div class="button" @click="screenResult"
                                 :style="'width:' + (clientWidth - 60) / 2 + 'px;background: #454592;'">
                                提交
                            </div>
                        </div>
                    </div>
                </div>
            </van-tabs>
            <!--SC EC CC 点击取值-->
            <van-action-sheet v-model="show" :actions="actions" @select="actionSelect"/>
        </div>
    </div>
</template>

<script>
    import Vue from "vue";
    import Combined from "@assets/icon/Combined Shape.svg";
    import left_icon from "@assets/icon/chevron_left.svg";
    import right_icon from "@assets/icon/chevron_right.svg";
    import Calendar from "@components/snfDashboardCalendar";
    import Seched from '@assets/icon/20.svg';
    import update from '@assets/icon/21.svg';
    import update2 from '@assets/icon/22.svg'
    import vuescroll from 'vuescroll';

    Vue.use(vuescroll);
    import {
        Loading,
        Overlay,
        Circle,
        Tab,
        Tabs,
        Field,
        ActionSheet
    } from "vant";
    import dayjs from "dayjs";

    Vue.use(Circle);
    Vue.use(Tab);
    Vue.use(Tabs);
    Vue.use(Field);
    Vue.use(ActionSheet);
    export default {
        name: "pl",
        components: {
            Tab,
            Tabs,
            Calendar,
            Loading,
            Overlay,
            vuescroll
        },
        data() {
            return {
                clientWidth: document.documentElement.clientWidth, // 页面宽度
                Submit: true,//提交
                showScreen: false,
                ops: {
                    vuescroll: {},
                    scrollPanel: {},
                    rail: {},
                    bar: {
                        background: '#454592',
                        opacity: "0.1"
                    }
                },
                loading: true,
                cal_label: "",
                Combined: Combined,
                dayList: [],
                weekday: "",
                left_icon: left_icon,
                right_icon: right_icon,
                day: "",
                activeName: '2020/10',
                Seched: Seched,
                searchText: "",
                selectScreenNum: 0,
                showScreen: false,
                update: update,
                update2: update2,
                infoList: [
                    {
                        Name: "张医生",
                        hospital: "河北医科大学",
                        Department: "呼吸科",
                        potential: "A",
                        faction: "预昆派",
                        state: "前",
                        SC: "",
                        EC: "",
                        CC: ""
                    },
                    {
                        Name: "张医生",
                        hospital: "河北医科大学",
                        Department: "呼吸科",
                        potential: "A",
                        faction: "预昆派",
                        state: "前",
                        SC: "",
                        EC: "",
                        CC: ""
                    },
                    {
                        Name: "张医生",
                        hospital: "河北医科大学",
                        Department: "呼吸科",
                        potential: "A",
                        faction: "预昆派",
                        state: "前",
                        SC: "",
                        EC: "",
                        CC: ""
                    },
                    {
                        Name: "张医生",
                        hospital: "河北医科大学",
                        Department: "呼吸科",
                        potential: "A",
                        faction: "预昆派",
                        state: "前",
                        SC: "",
                        EC: "",
                        CC: ""
                    },
                    {
                        Name: "张医生",
                        hospital: "河北医科大学",
                        Department: "呼吸科",
                        potential: "A",
                        faction: "预昆派",
                        state: "前",
                        SC: "",
                        EC: "",
                        CC: ""
                    },
                    {
                        Name: "张医生",
                        hospital: "河北医科大学",
                        Department: "呼吸科",
                        potential: "A",
                        faction: "预昆派",
                        state: "前",
                        SC: "",
                        EC: "",
                        CC: ""
                    },
                    {
                        Name: "张医生",
                        hospital: "河北医科大学",
                        Department: "呼吸科",
                        potential: "A",
                        faction: "预昆派",
                        state: "前",
                        SC: "",
                        EC: "",
                        CC: ""
                    }
                ],
                show: false,
                ShuJu: {
                    Number: 0,
                    SC: false,
                    EC: false,
                    CC: false,
                },
                actions: [
                    {name:0,disabled:false},
                    {name:1,disabled:false},
                    {name:2,disabled:false},
                    {name:3,disabled:false},
                    {name:4,disabled:false}
                ],
                activeIndex: '',
                activeType: ''
            };
        },
        methods: {
            //清楚
            clearScreen() {

            },
            //提交
            screenResult() {

            },
            onSelect(item) {
                for (let i = 0; i < this.infoList.length; i++) {
                    if (this.ShuJu.Number == i) {
                        if (this.ShuJu.SC == true) {
                            this.infoList[i].SC = item.name;
                            this.ShuJu.SC = false;
                        }
                        else if (this.ShuJu.EC == true) {
                            this.infoList[i].EC = item.name;
                            this.ShuJu.EC = false;
                        }
                        else if (this.ShuJu.CC == true) {
                            this.infoList[i].CC = item.name;
                            this.ShuJu.CC = false;
                        }
                    }
                }
                this.show = false;
            },
            clickScreen() {
                scrollTo(0, 0)
                this.showScreen = true;
            },
            // 输入搜索条件
            inputSearch(e) {
                this.searchText = e.currentTarget.value
            },
            //Tab选项卡
            tabChange(name, title) {
                this.activeName = name
                console.log(this.activeName);
            },
            getWeekDay() {
                this.dayList = [];
                let weekStart = dayjs(this.weekday).startOf("week").format("YYYY-M-D");

                for (let i = 0; i < 7; i++) {
                    this.dayList.push({
                        idx: dayjs(weekStart).add(i, "day").format("D"),
                        day: dayjs(weekStart).add(i, "day").format("YYYY-M-D"),
                    });
                }
            },
            changeWeek(type) {
                switch (type) {
                    case "preWeek": {
                        this.weekday = dayjs(this.weekday)
                            .subtract(7, "day")
                            .format("YYYY-M-D");
                        this.getWeekDay();
                        break;
                    }
                    case "nextWeek": {
                        this.weekday = dayjs(this.weekday).add(7, "day").format("YYYY-M-D");
                        this.getWeekDay();
                        break;
                    }
                }
            },
            handleDayClick(day) {
                this.day = day;
                //TODO 调用接口获取数据
            },
            actionSelect(item) {
                this.infoList[this.activeIndex][this.activeType] = parseInt(item.name)
                this.activeIndex = ''
                this.activeType = ''
                this.show = false
            },
            computPoVal(po) {
                if (po == 'A') {
                    return 4
                } else if (po == 'B') {
                    return 2
                } else {
                    return 1
                }
            },
            handleInputClick(index, type) {
                 // debugger
                this.activeIndex = index
                this.activeType = type
                let d = this.infoList[index]
                let sc = d.SC || 0
                let cc = d.CC || 0
                let ec = d.EC || 0
                let po = this.computPoVal(d.potential)
                let actionTotal =sc+cc+ec// 目前 填写的多少
                if(po<=actionTotal){//填写==潜力值
                    this.actions[0].disabled=false;
                    this.actions[1].disabled=true;
                    this.actions[2].disabled=true;
                    this.actions[3].disabled=true;
                    this.actions[4].disabled=true;
                }else{
                    let num = parseInt(po-actionTotal);//剩余可以填入的
                    for(let i =0;i<=num;i++){
                        this.actions[i].disabled=false;
                    }
                    for(let j =num+1;j<this.actions.length;j++){
                        this.actions[j].disabled=true;
                    }
                }
                this.show = true
            },
            // //点击显示选值
            // ClickSC(index) {
            //     this.ShuJu.Number = 0;
            //     this.show = true;
            //     this.ShuJu.Number = index;
            //     this.ShuJu.SC = true;
            // },
            // ClickEC(index) {
            //     this.ShuJu.Number = 0;
            //     this.show = true;
            //     this.ShuJu.Number = index;
            //     this.ShuJu.EC = true;
            // },
            // ClickCC(index) {
            //     this.ShuJu.Number = 0;
            //     this.show = true;
            //     this.ShuJu.Number = index;
            //     this.ShuJu.CC = true;
            // },
            // 点击筛选
        },

        mounted() {
            setTimeout(() => {
                this.loading = false;
                this.day = dayjs().subtract(1, "day").format("YYYY-M-D");
                this.weekday = this.day;
                this.getWeekDay();
            }, 1000);
            //获取日期
            this.day = dayjs().format('YYYY/MM');
        },
        watch: {
            day(newval, oldval) {
                this.weekday = newval;
                this.getWeekDay();
                this.cal_label = dayjs(newval).format("YYYY/MM");
            }
            ,
        }
    }

</script>
<style src="./plStresspWrite.css" scoped></style>